<template>
  <!--  <el-button>button</el-button>-->
  <div style="padding: 10px">
    <!--    功能区域-->
    <!-- <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新资产入库</el-button>
      <el-button type="primary" @click="resend">IT资产调拨</el-button>
    </div> -->

    <!-- 显示库存表格 -->
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 总览 -->
        <el-tab-pane label="总览" name="first">
          <!-- 总览总计 -->
          <div>
            <span class="demonstration" style="padding-right: 10px"
              >资产类型</span
            >
            <el-select
              v-model="value.device"
              filterable
              clearable
              placeholder="设备类型"
              @change="whichDevice"
              style="padding-right: 10px"
            >
              <el-option
                v-for="item in device"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>数量总计：{{ totaland }}</span>
          </div>
          <!-- 总览列表 -->
          <el-table
            :data="newandoldTableData"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="whichstore"
              label="所属库区"
              sortable
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="code"
              label="固定资产编码"
              sortable
              width="180"
            >
            </el-table-column>
            <el-table-column prop="name" label="设备名称" sortable width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备型号"
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="入库时间"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="rfid"
              label="RFID编码"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column prop="ps" label="备注" :formatter="formatter">
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="demo-pagination-block" style="padding-top: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[40, 100]"
              :page-size="40"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totaland"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- 新资产表单 -->
        <el-tab-pane label="IT库存新资产" name="second">
          <el-table :data="newTableData" border stripe style="width: 100%">
            <el-table-column
              prop="code"
              label="固定资产编码"
              sortable
              width="180"
            >
            </el-table-column>
            <el-table-column prop="name" label="设备名称" sortable width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备型号"
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="入库时间"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="rfid"
              label="RFID编码"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column prop="ps" label="备注" :formatter="formatter">
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <!-- <el-button
                  size="mini"
                  type="danger"
                  @click="handleEdit(scope.$index, scope.row)"
                  >删除</el-button
                > -->
                <el-popconfirm
                  confirm-button-text="Yes"
                  cancel-button-text="No"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                  @confirm="handleEdit(scope.$index, scope.row)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <el-button type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="demo-pagination-block" style="padding-top: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[40, 100]"
              :page-size="40"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- 旧资产表单 -->
        <el-tab-pane label="IT库存旧资产" name="third">
          <el-table :data="oldTableData" border stripe style="width: 100%">
            <el-table-column
              prop="code"
              label="固定资产编码"
              sortable
              width="180"
            >
            </el-table-column>
            <el-table-column prop="name" label="设备名称" sortable width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备型号"
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="入库时间"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="rfid"
              label="RFID编码"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column prop="ps" label="备注" :formatter="formatter">
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="demo-pagination-block" style="padding-top: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[40, 100]"
              :page-size="40"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalold"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- 报废资产表单 -->
        <el-tab-pane label="报废资产" name="fourth"
          ><el-table :data="scrapTableData" border stripe style="width: 100%">
            <el-table-column
              prop="code"
              label="固定资产编码"
              sortable
              width="180"
            >
            </el-table-column>
            <el-table-column prop="name" label="设备名称" sortable width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备型号"
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="入库时间"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column
              prop="rfid"
              label="RFID编码"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column prop="ps" label="备注" :formatter="formatter">
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="demo-pagination-block" style="padding-top: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[40, 100]"
              :page-size="40"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalscrap"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--    新增表单-->
    <div>
      <el-dialog title="新资产入库" v-model="dialogGoodsFormVisible">
        <el-form
          ref="goodsForm"
          :model="goodsForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="固定资产编码" prop="code">
            <el-input v-model="goodsForm.code" style="width: 60%">
              <!-- <template #prepend value>GM-</template> -->
            </el-input>
            <!-- <el-button @click = "txt">cccc</el-button> -->
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="goodsForm.name" style="width: 60%"></el-input>
          </el-form-item>
          <el-form-item label="品牌型号" prop="type">
            <el-input v-model="goodsForm.type" style="width: 60%"></el-input>
          </el-form-item>
          <el-form-item label="使用人" prop="whichstaff">
            <el-input
              v-model="goodsForm.whichstaff"
              style="width: 60%"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="goodsForm.ps" style="width: 60%"></el-input>
          </el-form-item>

          <el-form-item label="入库类型">
            <el-radio-group v-model="goodsForm.whichstore">
              <el-radio label="IT资产新设备库"></el-radio>
              <el-radio label="IT资产旧设备库"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="RFID条码" prop="rfid">
            <el-button type="primary" @click="bind"> 扫码绑定 </el-button>
            <el-dialog title="新资产入库" v-model="dialogBindFormVisible">
              <el-input
                v-model="goodsForm.rfid"
                ref="input"
                style="width: 60%"
                @keyup.enter.native="save('goodsForm')"
              ></el-input>
            </el-dialog>
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogGoodsFormVisible = false">取 消</el-button>
            <el-button @click="resetForm('goodsForm')">重置</el-button>
            <el-button type="primary" @click="save('goodsForm')"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <!--   调拨表单 -->
    <div>
      <el-dialog title="IT资产调拨" v-model="dialogResendFormVisible">
        <el-form
          ref="resendForm"
          :model="resendForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="调往部门" prop="whichstore">
            <!-- <el-input v-model="resendForm.whichstore" style="width: 60%"></el-input> -->
            <el-radio-group v-model="resendForm.whichstore">
              <!-- <el-radio label="IT资产新设备库"></el-radio> -->
              <el-radio :label="store[0].name"></el-radio>
              <el-radio :label="store[1].name"></el-radio>
            </el-radio-group>
            <el-select
              v-model="resendForm.whichstore"
              placeholder="请选择部门"
              filterable
            >
              <el-option
                v-for="item of store"
                :key="item['name']"
                :label="item['name']"
                :value="item['name']"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用人" prop="whichstaff">
            <el-input
              v-model="resendForm.whichstaff"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <el-form-item label="RFID条码" prop="rfid">
            <el-input
              v-model="resendForm.rfid"
              style="width: 60%"
              @keyup.enter.native="send('resendForm')"
            ></el-input>
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogResendFormVisible = false"
              >取 消</el-button
            >
            <el-button @click="resetForm('resendForm')">重置</el-button>
            <el-button type="primary" @click="send('resendForm')"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>




<script>
import request from "../utils/request";

export default {
  data() {
    return {
      total: "",
      currentPage: 1,
      search: "",
      goodsForm: {},
      resendForm: {},
      activeName: "first",
      // IT新资产库对象数组
      newTableData: [],
      // IT旧资产库对象数组
      oldTableData: [],
      // IT报废资产库对象数组
      scrapTableData: [],
      // IT新资产库对象数组 and // IT旧资产库对象数组
      newandoldTableData: [],
      store: [],
      value: {},
      device: [
        {
          value: "主机",
          label: "主机",
        },
        {
          value: "显示器",
          label: "显示器",
        },
        {
          value: "打印机",
          label: "打印机",
        },
        {
          value: "电话机",
          label: "电话机",
        },
        {
          value: "扫描枪",
          label: "扫描枪",
        },
        {
          value: "笔记本",
          label: "笔记本",
        },
        {
          value: "投影仪",
          label: "投影仪",
        },
      ],
      rules: {
        code: [
          {
            required: true,
            message: "请输入10位固定资产编码",
            trigger: "blur",
            min: 10,
          },
        ],
        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        type: [
          { required: true, message: "请输入设备品牌型号", trigger: "blur" },
        ],
        rfid: [{ required: true, message: "请绑定RFID标签", trigger: "blur" }],
        whichstore: [
          { required: true, message: "请扫描部门识别码", trigger: "blur" },
        ],
      },
      dialogGoodsFormVisible: false,
      dialogResendFormVisible: false,
      dialogBindFormVisible: false,
    };
  },
  created() {
    // console.log(1111);
    this.load();
    this.getstore();
  },
  methods: {
    add() {
      // console.log('pin')
      this.dialogGoodsFormVisible = true;
      this.goodsForm = { code: "GM-" };
      this.goodsForm.whichstore = "IT资产新设备库";
    },
    save(formName) {
      // console.log(this.form)
      // this.dialogFormVisible = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          console.log(this.goodsForm);
          request.post("/api/goods", this.goodsForm).then((res) => {
            console.log(res);
            if (res.code === "0") {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.dialogGoodsFormVisible = false;
              this.load();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        } else {
          console.log("表单填写有误");
          alert("表单填写有误");
          return false;
        }
      });
    },

    resend() {
      this.dialogResendFormVisible = true;
      this.resendForm = {};
    },
    send(formName) {
      // console.log(this.form)
      // this.dialogFormVisible = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          // console.log(this.resendForm);
          request
            .put("/api/goods", this.resendForm)
            .then((res) => {
              console.log(res);
              if (res.code === "0") {
                this.$message({
                  type: "success",
                  message: "调拨成功",
                });
                this.dialogResendFormVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            })
            .catch((rej) => {
              this.$message({
                type: "error",
                message: "调拨失败，请检查RFID条码",
              });
            });
        } else {
          console.log("表单填写有误");
          return false;
        }
      });
    },

    getstore() {
      request.get("/api/store").then((res) => {
        if (res.code === "0") {
          this.store = res.data.records;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },

    getgoods() {
      request.get("/api/goods").then((res) => {
        this.newtabledata = res.data.records;
      });
    },

    load() {
      request
        .get("/api/goods/new", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: "IT资产新设备库",
          },
        })
        .then((res) => {
          // console.log(res);
          console.log(this.newTableData);
          this.newTableData = res.data.records;
          this.total = res.data.total;
          console.log(this.newTableData);
          // console.log(this.newtabledata);
        });
      request
        .get("/api/goods/new", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: "IT资产旧设备库",
          },
        })
        .then((res) => {
          // console.log(res);
          console.log(this.oldTableData);
          this.oldTableData = res.data.records;
          this.totalold = res.data.total;
          console.log(this.oldTableData);
          // console.log(this.newtabledata);
        });
      request
        .get("/api/goods/new", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: "IT资产报废库",
          },
        })
        .then((res) => {
          // console.log(res);
          console.log(this.scrapTableData);
          this.scrapTableData = res.data.records;
          this.totalscrap = res.data.total;
          console.log(this.scrapTableData);
          // console.log(this.newtabledata);
        });
      request
        .get("/api/goods/device", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: "设备库",
            device: this.value.device,
          },
        })
        .then((res) => {
          // console.log(res);
          console.log(this.scrapTableData);
          this.newandoldTableData = res.data.records;
          this.totaland = res.data.total;
          console.log(this.newandoldTableData);
          // console.log(this.newtabledata);
        });
    },

    bind() {
      // console.log(111);
      this.dialogBindFormVisible = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    txt() {
      console.log(this.goodsForm);
    },
    whichDevice() {
      this.load();
    },
    handleEdit(a, b) {
      console.log(a);
      console.log(b.id);
      request.post("/api/goods/delete",b).then((res) => {
        if (res.code === "0") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.load()
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
      })
    },

    handleSizeChange(pageSize) {
      //改变当前每页个数触发
      this.pageSize = pageSize;
      console.log(pageSize);
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变当前页码触发
      this.currentPage = pageNum;
      console.log(pageNum);
      this.load();
    },
  },
};
</script>
